flutter doctorでVSCodeのExtensionが認識されない問題を調査してみた

今までずっと抱えてた「flutter doctorしてもVSCodeのExtensionを認識してくれない問題」を調査したので、その過程と結果をご報告します。

#Android

#iPhone

#Flutter

山田良

2018.08.30

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

大阪オフィスの山田です。Macのトラックパッドをずっと触っているとなんか滑りが悪くなってきます。今回は今までずっと抱えてた「flutter doctorしてもVSCodeのExtensionを認識してくれない問題」を調査したので、その過程と結果をご報告します。少しだけマニアックです。

事の発端

今までいくつかFlutterの記事を書いていて、毎回開発環境を示すためにflutter doctorの結果を記載していました。

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.5.1, on Mac OS X 10.13.5 17F77, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK 28.0.1)
[✓] iOS toolchain - develop for iOS devices (Xcode 9.4)
[✓] Android Studio (version 3.1)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.26.1)
[✓] Connected devices (1 available)

flutter doctor -vをして詳細を出します。

[!] VS Code (version 1.26.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

私はVSCodeを使用して開発しているので、当然Extensionがインストールされています。なのにびっくりマークが付きます。なぁぜぇ。。。

結果

まあ、まず疑うのはFlutterのバージョンか、VSCodeのバージョンかなぁと思います。VSCodeは最新を使用しています。Flutterはv0.5.1ですね。。。で、楽しくはないんですが結論から言ってしまうと、Flutterのバージョンが原因でした。最新のバージョンでは直っています。

原因調査

「バージョンを上げたら直りました。」もいいのですが、好きでFlutter触っているわけですし、じゃあ具体的にどこがどうなって解消されたん？という点が気になったので調査しました。Flutterのソースコードを追います。

ソースを取得する

GitHub - flutter/flutterで公開されています。別にengineというリポジトリもあるのですが、こちらはもっとコアな部分を司っているようです。詳しい線引きはまだ整理できていませんので今回は触れません。GitHub - flutter/flutterからcloneしてきます。

git clone git@github.com:flutter/flutter.git

2018/08/28 19:00現在、リリースタグを見るとv0.7.2となってますね。v0.6.0からv0.7.0の間、めっちゃリリース間隔短くない？

探して、動かす

flutter doctorで、VSCodeを見て動くソースはどこらへんかなぁとGrepして見ます。

flutter/packages/flutter_tools/lib/src/vscode/

ここの中にVSCodeの記述が。これっぽい。ん。。。ソースを落としてきたものの、これどうやって動かすんだ？？　　flutter/packages/flutter_tools/のREADME.mdを見ると../../bin/cache/dart-sdk/bin/pub run test -j1これでtestが走るよ、と書いてあります。実行すると、そんなファイルは無いと怒られます。えぇ。。。

探して、動かす（その２）

CONTRIBUTINGにヒントがありました。

The flutter tool itself is built when you run flutter for the first time and each time you run flutter upgrade.

あ、flutterコマンドを一回、走らせないとダメなのね。自動生成されるのかな。

Add this repository's bin directory to your path. That will let you use the flutter command in this directory more easily.

落としてきたソースのbinディレクトリにパスを通します。~/.bash_profileにパスを記載してsource ~/.bash_profileします。そしてflutter doctor。そうすると先ほどのtestを走らせるコマンドが実行できるようになります。

ソースを見る

全部は追いきれないので今回はVSCodeのExtensionチェックのところだけ。 VsCodeクラスのコンストラクタで以下のような処理を行なっています。ソースコードはこちら

- extensionディレクトリがそもそも存在するかチェック
- `Dart-Code.flutter`をlower-caseに変換
- extensionディレクトリの中をlower-caseに変換しながら検索する
- extensionディレクトリが見つかったらvalidationMessageにバージョンを記載し、validate完了とする

んーなるほどこういう流れなのね。ちなみにこのクラスにはVSCodeのインストールディレクトリを定義して返却する_installedMacOSメソッドもあります。

いつ直ったのかを調査する

git log packages/flutter_tools/lib/src/vscode/でそれっぽいログを探します。それっぽいものが見つかりました。このコミットですね。コミットメッセージを意訳します。間違っていたらごめんなさい。

VSCodeは最近、extensionのフォルダにlower-caseを使うようになった。（私たちは`Dart-Code.flutter`と定義しているが、`dart-code.flutter`となる。）なので、Casingを厳密にチェックしないようにした

見ると、toLowerCaseの処理が追加されています。日付を見ると2018/06/18になっていますね。これだ！！

そして最新版のFlutterでdoctorする

[✓] Flutter (Channel master, v0.7.3-pre.24, on Mac OS X 10.13.5 17F77, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK 28.0.1)
[✓] iOS toolchain - develop for iOS devices (Xcode 9.4)
[✓] Android Studio (version 3.1)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] VS Code (version 1.26.1)
[!] Connected devices
    ! No devices available

VS Codeのびっくりマークは解消されています。Connected devicesについては、端末を接続したら解消するので触れません。